<template>
  <div>
    <sub-title :subTitle="'退货原因'" :isRefresh="false"></sub-title>
    <div class="body">
      <div class="box-title flex between h-center">
        <span class="font-20">数据列表</span>
        <div class="flex h-center">
          <el-button class="search" @click="update('')">添加原因</el-button>
          <!-- <el-select v-model="input" placeholder="显示条数" class="search-input">
            <el-option key="1" value="1" label="1"></el-option>
          </el-select>
          <el-select v-model="input" placeholder="排序方式" class="search-input">
            <el-option key="1" value="1" label="1"></el-option>
          </el-select> -->
        </div>
      </div>
      <el-table class="mall-table" :data="tableData3" v-loading="loading" ref="table" @selection-change="tableSelection"
                :header-cell-style="headerStyle" :cell-style="tdStyle">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="原因类型">
          <template slot-scope="scope">{{ scope.row.reasonType }}</template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="排序">
          <template slot-scope="scope">{{scope.row.sorts}}</template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="是否启用"
            show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch @change="handleStatus($event, scope.row.id)" v-model="scope.row.isUse" :active-value="1"
                       :inactive-value="0" active-color="#5BC0BF" inactive-color="#ff4949"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="添加时间"
            show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.creatTime}}</template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="编辑"
            show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="table-btn" @click="update(scope.row.id)">编辑</span>
            <span class="table-btn" @click="remove([scope.row.id])">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination @handleChangeAll="handleChangeAll" :optionsList="optionsList" ref="pagination"
                  @confirmBatch="confirmBatch" @next="next" :total="total" :pageSize="pageSize"></pagination>
      <el-dialog
          title="退货原因"
          :visible.sync="dialogVisible"
          :append-to-body="true">
        <el-form>
          <el-form-item label="原因类型">
            <el-input v-model="reason"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="sorts" type='number' @keyup.native="number"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="isUse" :active-value="1" :inactive-value="0" active-color="#5BC0BF"
                       inactive-color="#ff4949"></el-switch>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="add()">确 定</el-button>
                </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import subTitle from "@/components/subTitle"
  import mixin from "@/utils/mixin"
  import pagination from "@/components/pagination"

  export default {
    name: "returnCause",
    mixins: [mixin],
    components: {
      subTitle,
      pagination,
    },
    data() {
      return {
        input: '',
        tableData3: [],
        total: 1,
        checkAll: true,
        dialogVisible: false,
        isUse: 1,
        checkItemId: [],
        pagesize2: 1,
        id: "",
        sorts: '',
        reason: '',
        optionsList: {
          'delete': '删除'
        },
        //   pickerOptions1: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        //   shortcuts: [{
        //     text: '今天',
        //     onClick(picker) {
        //       picker.$emit('pick', new Date());
        //     }
        //   }, {
        //     text: '昨天',
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24);
        //       picker.$emit('pick', date);
        //     }
        //   }, {
        //     text: '一周前',
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        //       picker.$emit('pick', date);
        //     }
        //   }]
        // },
        // value1: '',
      }
    }, created: function () {
      this.getList(1)
    },
    methods: {
      getList(pageSize11) {
        this.loading = true;
        this.pagesize2 = pageSize11;
        this.$http.post('/return_reason/query_for_pageB', {
          currentPage: pageSize11,
          pageSize: this.pageSize,
          merchantId: JSON.parse(localStorage.userInfo).merchantId
        }).then((res) => {
          this.total = res.totalCount
          this.tableData3 = res.list;
        }, (err) => {
          this.$msgErr(err.msg);
        }).finally(() => {
          this.loading = false;
        })
      }, handleStatus($event, id) {
        this.$http.post('/return_reason/add', {
          id: id,
          isUse: $event,
          merchantId: JSON.parse(localStorage.userInfo).merchantId
        }).then((res) => {
          this.$msgSuc("操作成功");
        }, (err) => {
          this.$msgErr(err.msg);
        })
      }, remove(id) {
        this.$confirm("确认删除吗?").then(() => {
          this.$http.post('/return_reason/delete', {ids: id}).then(() => {
            this.$msgSuc("删除成功");
            this.getList(1);
          }, (err) => {
            this.$msgErr(err.msg);
          })
        })
      }, update(val) {
        this.id = val;
        if (val == "") {
          this.sorts = '',
            this.reason = '',
            this.isUse = ''
        } else {
          this.$http.post('/return_reason/selectOne', {
            id: val,
            merchantId: JSON.parse(localStorage.userInfo).merchantId
          }).then((res) => {
            this.sorts = res.sorts
            this.reason = res.reasonType
            this.isUse = res.isUse
          }, (err) => {
            this.$msgErr(err.msg);
          })
        }
        this.dialogVisible = true;
      }, number() {
        this.sorts = this.sorts.replace(/[^\.\d]/g, '');
        this.sorts = this.sorts.replace('.', '');
      }, add() {
        if (this.reason == "") {
          this.$msgErr('请输入退货原因');
          return false;
        }
        if (this.sorts == "") {
          this.$msgErr('请输入排序');
          return false;
        }
        if (this.id == '') {
          this.$http.post('/return_reason/add', {
            reasonType: this.reason,
            sorts: this.sorts,
            isUse: this.isUse,
            merchantId: JSON.parse(localStorage.userInfo).merchantId
          }).then((res) => {
            this.$msgSuc('添加成功');
            this.dialogVisible = false;
            this.getList(this.pageSize2);
          }, (err) => {
            this.$msgErr(err.msg);
          })
        } else {
          this.$http.post('/return_reason/add', {
            reasonType: this.reason,
            sorts: this.sorts,
            id: this.id,
            isUse: this.isUse,
            merchantId: JSON.parse(localStorage.userInfo).merchantId
          }).then((res) => {
            this.$msgSuc('修改成功');
            this.getList(this.pageSize2);
            this.dialogVisible = false;
          }, (err) => {
            this.$msgErr(err.msg);
          })
        }
      }, next(val) {
        this.getList(val);
      }, tableSelection(val) {
        this.checkItemId = [];
        if (val.length == this.tableData3.length) {
          this.$refs.pagination._data.checkAll = true;
        } else {
          this.$refs.pagination._data.checkAll = false;
        }
        val.forEach((item) => {
          this.checkItemId.push(item.id);
        });
      },
      // open3() {
      //   this.$prompt('请输入邮箱', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
      //     inputErrorMessage: '邮箱格式不正确'
      //   }).then(({ value }) => {
      //     this.$message({
      //       type: 'success',
      //       message: '你的邮箱是: ' + value
      //     });
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '取消输入'
      //     });       
      //   });
      // }
      headerStyle() {
        return {
          color: '#595757',
          background: '#F6F6F6',
          fontSize: '15px',
          borderLeft: '1px solid #b4b4b4',
          borderTop: '1px solid #b4b4b4',
          textAlign: 'center'
        }
      },
      tdStyle() {
        return {
          color: '#595757',
          fontSize: '15px',
          borderLeft: '1px solid #b4b4b4',
          borderTop: '1px solid #b4b4b4',
          textAlign: 'center'
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  @import "~@/assets/css/common";
  .filter-wrap {
    border: 1px solid #dedede;
    margin-bottom: 24px;
    margin-top: 30px;
    em {
      font-style: normal;
    }
    img {
      width: 20px;
      margin-bottom: -6px;
    }
    > div {
      padding: 0 22px;
      height: 56px;
      &:last-child {
        background-color: $bgColor;
      }
    }
    .search-input{
      width: 200px;
      margin: 0 15px;
    }
  }

  .search {
    margin-left: 20px;
  }

  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }

  /deep/ {
    .el-dialog {
      width: 500px;
    }
    .el-form-item__label {
      display: inline-block;
      width: 100px;
    }
  }

</style>
